<template>
  <div class="table-box">
    <KingTable ref="kingTable" :tableOptions="_tableOptions"> </KingTable>
  </div>
</template>

<script setup lang="tsx" name="LoginlogList">
import { ref, reactive } from "vue";
import KingTable from "@/components/KingTable/index.vue";

// 获取 KingTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const kingTable = ref();

// 如果表格需要初始化请求参数，直接定义传给 KingTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const _initParam = reactive({ EQ_ss: 1, sorts: "cts@desc" });

// 表格配置项
const _tableCols = [
  { type: "index", label: "序号", align: "center", width: 60 },
  {
    prop: "userName",
    label: "用户名称",
    width: 100
  },
  {
    prop: "ipaddr",
    label: "请求地址",
    width: 160,
    overflow: true
  },
  {
    prop: "loginLocation",
    label: "登录地点",
    width: 160
  },
  {
    prop: "os",
    label: "操作系统",
    width: 120,
    overflow: true
  },
  {
    prop: "browser",
    label: "浏览器",
    width: 120,
    overflow: true
  },
  {
    prop: "status",
    label: "登录状态",
    width: 100
  },
  {
    prop: "loginTime",
    label: "登录时间",
    width: 160
  },
  {
    prop: "msg",
    label: "描述",
    overflow: true
  }
];

const _searchCols = [
  {
    prop: "LIKE_userName",
    label: "用户名称",
    width: 100,
    el: "input"
  },
  {
    prop: "LIKE_ipaddr",
    label: "登录地址",
    width: 100,
    el: "input"
  },
  { prop: "LIKE_operIp", label: "请求IP", width: 120, el: "input" }
];

const _tableOptions = {
  title: "登录日志",
  queryUrl: "monitor/loginlog/query",
  tableColumns: _tableCols,
  searchColumns: _searchCols,
  initParam: _initParam
};
</script>
